<template>
  <el-row :gutter="20">
    <el-col :span="4" :xs="24">
      <ContentWrap class="h-1/1">
        <div class="head-container">
          <el-tree
            ref="treeRef"
            :data="list"
            :expand-on-click-node="false"
            :props="defaultProps"
            node-key="id"
            @node-click="handleNodeClick"
          />
        </div>
      </ContentWrap>
    </el-col>
    <el-col :span="20" :xs="24">
      <ContentWrap class="h-1/1">
        <div v-show="modelDetailId == 1">
          <Contenttext ref="contenttextRef" />
        </div>
        <div v-show="modelDetailId == 2">
          <ContentImage ref="ContentImageRef" />
        </div>
        <div v-show="modelDetailId == 3">
          <ContentNews ref="ContentNewsRef" />
        </div>
        <div v-show="modelDetailId == 4">
          <ContentDept ref="ContentDeptRef" />
        </div>
        <div v-show="modelDetailId == 5">
          <ContentExpert ref="ContentExpertRef" />
        </div>
        <div v-show="modelDetailId == 6">
          <ContentJob ref="ContentJobRef" />
        </div>
      </ContentWrap>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ElTree } from 'element-plus'
import { defaultProps, handleTree } from '@/utils/tree'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { MenuApi, MenuVO } from '@/api/cms/menu'
import Contenttext from './component/Contenttext.vue'
import ContentImage from './component/ContentImage.vue'
import ContentNews from './component/ContentNews.vue'
import ContentDept from './component/ContentDept.vue'
import ContentExpert from './component/ContentExpert.vue'
import ContentJob from './component/ContentJob.vue'

/** CMS菜单 列表 */
defineOptions({ name: 'CmsContent' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<any>([]) // 列表的数据
const treeRef = ref<InstanceType<typeof ElTree>>()
const queryParams = reactive({
  pageNo: 1,
  pageSize: 100,
  name: undefined,
  parentId: undefined,
  modelId: undefined,
  sort: undefined,
  createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await MenuApi.getMenuPage(queryParams)
    list.value = handleTree(data.list)
  } finally {
    loading.value = false
  }
}
const modelDetailId: any = ref(null)
// 文本模型
const contenttextRef = ref()
// 图集
const ContentImageRef = ref()
// 新闻
const ContentNewsRef = ref()
// 科室
const ContentDeptRef = ref()
// 专家
const ContentExpertRef = ref()
// 招聘
const ContentJobRef = ref()
const handleNodeClick = (row) => {
  modelDetailId.value = row.modelId
  switch (row.modelId) {
    case 1: //文本模型
      contenttextRef.value.open(row.id, row.name)
      break
    case 2: //图集模型
      ContentImageRef.value.open(row.id)
      break
    case 3: //新闻模型
      ContentNewsRef.value.open(row.id)
      break
    case 4: //科室模型
      ContentDeptRef.value.open(row.id)
      break
    case 5: //专家模型
      ContentExpertRef.value.open(row.id)
      break
    case 6: //招聘模型
      ContentJobRef.value.open(row.id)
      break

    default:
      break
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>